<template>
	<view class="">
		<u-popup :show="lhshow" @close="lhclose" mode="center" :round="10">
			<view class="" style="padding: 50rpx 40rpx; ">
				<view class="titletext fonweight xiaohei" style="width: 550rpx;">
					是否清空全部搜索記錄？
				</view>
				<view class=" flexright" style="margin-top: 100rpx;">
					<view class="xiaohui titletext margin_right3" @click="lhclose">取消</view>
					<view class="xiaohuang titletext fonweight" @click="empty();lhclose()">確定</view>
				</view>
			</view>
		</u-popup>
		<view class="mainpadding" style="padding-bottom: 0;">
			<view class="searchBox  flexbetween" @click="sousuo">
				<view class="flexleft" style="width: 100%;">
					<view class="" @click="jumpurl('/pages_index/scanywcode')">
						<u-icon name="scan" color="#ffb800" size="28"></u-icon>
					</view>
					<input class="margin_left1" type="text" placeholder="請輸入搜索内容" style="width: 100%;"
						placeholder-style="font-size: 24rpx;font-weight: 500;color: #B5B5B5;" v-model="keywords"
						@confirm="tzssjg()" confirm-type="search">
				</view>
				<view class="searchBtn" @click="tzssjg()">搜索</view>
			</view>
		</view>
		<u-tabs :list="tabList" @click="change" lineWidth="70rpx" lineColor="rgba(255, 209, 0, 1)"
			:activeStyle="{color: '#000000',fontWeight: 800,transform: 'scale(1.05)'}"
			:inactiveStyle="{color: '#666666',transform: 'scale(1)'}"></u-tabs>
		<view class="mainpadding2">
			<view class="hei_text titletext margin_top bold" v-if="ss_ls.length">搜索歷史</view>
			<scroll-view scroll-y="true" style="max-height: 700rpx;">
				<view class="flexbetween margin_top5" v-for="(item,index) in ss_ls" :key="index" @click="clickssls(item)">
					<view class="flexleft">
						<view class="margin_right2">
							<u-icon name="clock" color="#333333" size="16"></u-icon>
						</view>
						<view class="main_size xiaohei">{{item}}</view>
					</view>
					<view class="" @click.stop="shanchuitem(index)">
						<u-icon name="close" color="#999" size="14"></u-icon>
					</view>
				</view>
			</scroll-view>
			<view class="flexcenter margin_top5 xiahuaxian" v-if="ss_ls.length" @click="lhshow = true">
				<view class="sanshier xiaohui">清空全部搜素記錄</view>
			</view>
			<view class="flexbetween margin_top5">
				<view class="hei_text titletext  bold">猜你想搜</view>
				<view class="" @click.stop="cainixs">
					<u-icon name="reload" color="#333" size="24"></u-icon>
				</view>
			</view>
			<view class="flexleft flex_wrap">
				<!-- <view class="margin_top5" style="width: 50%;" v-for="(item,index) in 8" :key="index">
					<view class="main_size xiaohei">哈哈哈打赏</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				lhshow: false,
				keywords: "",
				ss_ls: [],
				lat: "",
				lng: "",
				tabList: [],
			}
		},
		onLoad(options) {
			this.lat = options.lat
			this.lng = options.lng
			let list = uni.getStorageSync("searchListtj");
			this.ss_ls = JSON.parse(list);
			this.getCateList()
		},
		methods: {
			getCateList() { //分類
				this.http.request('/api/index/getShopsort', 'GET', {
				}).then(res=>{
					this.tabList = res.data
				})
			},
			change(e){
				this.keywords = e.name
				this.tzssjg()
			},
			clickssls(item) {
				this.keywords = item
				this.tzssjg()
			},
			shanchuitem(i) {
				this.ss_ls.splice(i, 1);
				uni.setStorage({
					key: 'searchListtj',
					data: JSON.stringify(this.ss_ls)
				});
			},
			tzssjg() {
				let _this = this
				if (_this.keywords == '') {
					httpRequest.toast('請輸入内容');
					return false
				} else {
					if (!_this.ss_ls.includes(_this.keywords)) {
						_this.ss_ls.unshift(_this.keywords);
						uni.setStorage({
							key: 'searchListtj',
							data: JSON.stringify(_this.ss_ls)
						});
					} else {
						//有搜索記錄，刪除之前的旧記錄，将新搜索值重新push到數组首位
						let i = _this.ss_ls.indexOf(_this.keywords);
						_this.ss_ls.splice(i, 1);
						_this.ss_ls.unshift(_this.keywords);
						uni.setStorage({
							key: 'searchListtj',
							data: JSON.stringify(_this.ss_ls)
						});
					}
				}
				uni.navigateTo({
					url: "/pages_index/search?name=" + _this.keywords + "&lat=" + this.lat + "&lng=" + this.lng
				})
				this.keywords = ""
			},
			empty() {
				httpRequest.toast('已清空');
				uni.removeStorage({
					key: 'searchListtj'
				});

				this.ss_ls = [];
			},
			lhclose() {
				this.lhshow = false
			},
			jumper(url) {
				uni.navigateTo({
					url: url
				})
			},
			//
			tzsgjg() {
				uni.navigateBack(1)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.margin_top5 {
		margin-top: 50rpx;
	}

	.searchBox {
		height: 70rpx;
		background: #FFFFFF;
		border-radius: 65rpx 65rpx 65rpx 65rpx;
		border: 1rpx solid #FFFFFF;
		padding: 0 5rpx 0 30rpx;
		position: relative;
		z-index: 100;

		.searchBtn {
			width: 124rpx;
			height: 62rpx;
			line-height: 62rpx;
			text-align: center;
			background: linear-gradient(312deg, #F8CF39 0%, #F8DA44 100%);
			border-radius: 65rpx 65rpx 65rpx 65rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
		}
	}

	.ssousuobox1 {
		background-color: #f6f6f6;
		width: 100%;
		border-radius: 36rpx;
		padding: 10rpx 30rpx;
	}
</style>